<template>
	<a-modal :title="title" :width="600" :destroyOnClose="true" :maskClosable="false" :visible="visible" @cancel="handleCancel">
		<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
			<!-- 字典名称 -->
			<a-form-model-item label="所属模块" prop="module" ref="module">
				<a-select v-model="form.module" :placeholder="placeholder.module">
					<a-select-option v-for="(item,index)  in SystemModuleOpt" :key="index" :value="item.value">
						{{item.label}}
					</a-select-option>
				</a-select>
			</a-form-model-item>
			<!-- 字典名称 -->
			<a-form-model-item label="错误代码" prop="code" ref="code">
				<a-input :placeholder="placeholder.code" v-model.number="form.code" :disabled="disabledCode" />
			</a-form-model-item>
			<!-- 字典代码 -->
			<a-form-model-item label="错误描述" prop="message" ref="message">
				<a-input :placeholder="placeholder.message" v-model="form.message" />
			</a-form-model-item>
			<!-- 字典描述 -->
			<a-form-model-item label="错误原因">
				<a-input v-model="form.reason" :placeholder="placeholder.reason" />
			</a-form-model-item>
			<!-- 字典描述 -->
			<a-form-model-item label="解决方案">
				<a-input v-model="form.solution" :placeholder="placeholder.solution" />
			</a-form-model-item>
		</a-form-model>
		<!-- Modal 页脚 -->
		<template slot="footer">
			<a-button type="primary" :loading="loading" @click="onSubmit">保存</a-button>
		</template>
	</a-modal>
</template>
<script>
	import {dictLoad} from '../../../util/internal.api'
	import {errorAdd,errorUpdate} from '../public/http'
	export default {
		props: ['editRecord'],
		data() {
			return {
				isupdate: false, //是否是更新模式	
				loading: false, //按钮Loading
				title: '新增错误码',
				visible: true, //modal 显示状态
				disabledCode: false,
				labelCol: {
					span: 4
				},
				wrapperCol: {
					span: 20
				},
				SystemModuleOpt: [], //系统模块字典选项
				placeholder: {
					module: '请选择错误码所属模块',
					code: '请设置一个数字类型的错误代码  EG:1001001',
					message: '请设置错误描述 EG:字段格式不正确',
					reason: '请填写作错误原因 选填',
					solution: '请填写错误解决方案 选填'
				},
				form: {
					module: undefined,
					code: '',
					name: '',
					reason: '',
					solution: ''
				},
				rules: {
					module: {
						required: true,
						message: '请选择错误码所属模块',
						trigger: 'blur'
					},
					code: {
						required: true,
						pattern: /^[0-9]+$/,
						message: '请设置一个数字格式的错误代码',
						trigger: 'blur'
					},
					message: {
						required: true,
						message: '请设置错误描述',
						trigger: 'blur'
					}
				}
			};
		},
		methods: {
			handleSelect(d) {
				console.log(d);
				this.form.module = d.key;
			},
			//表单提交事件
			onSubmit() {
				this.$refs.ruleForm.validate(valid => {
					//验证成功后进行数据提交
					if (valid) {
					
						if (this.isupdate) {
							errorUpdate(this.form.id,this.form).then(res => this.xhrMsg(res));
						} else {
							errorAdd(this.form).then(res => this.xhrMsg(res));
						}
					}
				});
			},
			//新增和删除返回相同的消息构造
			xhrMsg(res) {
				console.log(res);
				if (res.code === 0) {
					//成功提醒
					this.$notification.success({
						message: '操作成功',
						description: res.message,
					});
					this.visible = false;
					this.$emit('closeFun', {
						render: true
					});
				} else {
					//错误提醒
					this.$notification.error({
						message: '操作失败',
						description: res.message,
					});
				}
				this.loading = false;
			},
			//关闭弹窗
			handleCancel() {
				this.visible = false;
				this.$emit('closeFun', {
					render: false
				});
			},
			//表单初始化
			fromVal() {
				let obj = {...this.editRecord};


					if (obj.id) {
						this.form = {...obj};
						this.isupdate = true;
						this.title = "编辑错误码"
						this.disabledCode = true; //代码项禁止修改
					
					} 
					 
 
			},
			//数据初始化
			async init() {
				await dictLoad('SystemModule').then(res => this.SystemModuleOpt = res)
				this.fromVal();
			}
			
			
		},
		created() {
			this.init();
		}
	};
</script>
